<html>
    <head>
        <meta charset="utf-8">
        <title>首页</title>
    </head>
    <body>
        <div id="tips" style="background-color:#f8d7da"></div>
        <div>
            <form method="get" action="/logout">
                <button type="submit">Logout</button>
            </form>
        </div>
        <div>
            <a href="/current">/current</a>
            <p id="userinfo"></p>
        </div>
        <hr/>
        <h4>第三方帐号绑定</h4>
        <table style="border: 1px solid;">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>绑定平台</th>
                    <th>绑定帐号信息</th>
                    <th>绑定时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="bind-infos">
                <tr>
                    <td>{{seq}}</td>
                    <td>{{type}}</td>
                    <td>{{identity}}</td>
                    <td>{{time}}</td>
                    <td><button onclick="unbind('{{id}}')">解除绑定</button></td>
                </tr>
            </tbody>
        </table>
        <div>你还可以绑定以下第三方帐号：</div>
        <div id="oauth-types">
            <a href="/oauth2/authorization/{{regId}}">{{type}}</a>
        </div>
    </body>
</html>

<script type="text/javascript" src="./js/jquery-3.5.0.min.js"></script>
<script type="text/javascript">
window.onload = function(){
    // 用户认证信息
    $.ajax({
        url: "/current",
        success: function(res){
            $("#userinfo").html(JSON.stringify(res));
        }
    });
    // 查询已绑定信息
    $.ajax({
        url: "/binds",
        success: function(res){
            let ele = $("#bind-infos")
            let template = ele.html().trim()
            let i = 1;
            let strArr = res.map(item => template.replace("{{seq}}", i++).replace("{{type}}", item.type)
                    .replace("{{identity}}", item.identity).replace("{{time}}", new Date(item.time).toLocaleString()).replace("{{id}}", item.id))
            ele.html(strArr.length == 0 ? '无' :strArr.join(""))
        }
    });
    // 查询未绑定的平台
    $.ajax({
        url: "/not-bind-types",
        success: function(res){
            let ele = $("#oauth-types")
            let template = ele.html().trim()
            let urls = res.map(item => template.replace("{{regId}}", item.regId).replace("{{type}}", item.type))
            ele.html(urls.join(" "))
        }
    });

    if(window.location.search.endsWith("?bind_success")){
        tips("绑定成功");
    }else if(window.location.search.endsWith("?bind_failure")){
        tips("绑定失败");
    }else if(window.location.search.endsWith("?oauth2_login")){
        tips("oauth2登录成功");
    }
}
function unbind(id){
    $.ajax({
        method: "DELETE",
        url: "/unbind/" + id,
        success: function(res){
            tips("解绑成功");
            setTimeout(() => {
                window.location.href = "/"
            }, 1000)
        }
    });
}
function tips(msg){
    $("#tips").html(msg).show().delay(3000).hide(300);
}
</script>